<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form :form="form" slot="detail">
        <a-row>
          <a-col :span="12">
            <a-form-item label="项目简称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                v-decorator="['projectName']"
                placeholder="请选择项目简称"
                @click="projectShortNameClick"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="项目编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['projectCode']"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="项目经理" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['charger']"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="项目专题" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                v-decorator="['subjectName']"
                placeholder="请选择专题名称"
                @click="subjectNameClick"
              ></a-input>
              <a-input v-decorator="['subjectId']" v-show='false'></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="专题编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['subjectCode']"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="问题编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['questionCode']"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="提出单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['proposeDep']" ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="提出人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['proposePersion']"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="联系方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['contact']"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="期望时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date  v-decorator="['expectedTime']" :trigger-change="true" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="预估人天" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['estimateWorkday']"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-select-user-by-dep :multi="false" v-decorator="['dutyPersion']"></j-select-user-by-dep>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="处理方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['dealType']" :trigger-change="true" dictCode="deal_function" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="问题状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['questionState']" :trigger-change="true" dictCode="question_state" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="审批状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['approveState']" :trigger-change="true" dictCode="question_approve_state" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="确认人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-select-user-by-dep :multi="false" v-decorator="['confirmorName']"></j-select-user-by-dep>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="确认时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date v-decorator="['confirmorTime']" :trigger-change="true" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="创建人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-select-user-by-dep :multi="false" v-decorator="['createBy']"></j-select-user-by-dep>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date v-decorator="['createTime']" :trigger-change="true" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="问题描述" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['questionDes']" rows="3"/>
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item label="业务规则（业务逻辑描述）" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['businessDes']" rows="3" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="前置条件" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['beginDes']" rows="3" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="后置条件" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['afterDes']" rows="3" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="字段信息" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['colnumMes']" rows="3" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="非功能要求" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['demandMes']" rows="3"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="设计约束" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['designMes']" rows="3"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="其他补充" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['ortherMes']" rows="3"/>
            </a-form-item>
          </a-col>
<!--          <a-col :span="24">-->
<!--            <a-form-item label="附图" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--              <j-image-upload text="附图" v-model="fileList" ></j-image-upload>-->
<!--            </a-form-item>-->
<!--          </a-col>-->
<!--          <a-col :span="24">
            <a-form-item label="确认人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-select-user-by-dep :multi="false" v-decorator="['confirmorName', validatorRules.confim]"
              />
              <a-input v-decorator="['confirmorId']" v-show='false'></a-input>
            </a-form-item>
          </a-col>-->
          <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
            <a-button @click="submitForm">提 交</a-button>
          </a-col>
        </a-row>
      </a-form>
    </j-form-container>
    <hf-project-select-modal ref="hfProjectSelectModal" :multiple="false" @hf-pm-project-select="hfPmProjectSelect"/>
    <hf-subject-select-modal ref="hfSubjectSelectModal" :multiple="false" @hf-subject-select="hfSubjectSelect"/>
    <hf-pm-project-question-choose-modal ref="hfPmProjectQuestionChooseModal" :multiple="false" @hf-pm-project-question-choose="projectSelect"/>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import HfProjectSelectModal from '@views/hifar/pm/modules/HfProjectSelectModal'
  import HfSubjectSelectModal from '@views/hifar/pm/modules/HfSubjectSelectModal'
  import HfPmProjectQuestionChooseModal from '@views/hifar/pm/modules/HfPmProjectQuestionChooseModal'
  import JImageUpload from '@comp/jeecg/JImageUpload'

  export default {
    name: 'HfPmProjectQuestionsForm',
    components: {
      HfProjectSelectModal,
      HfSubjectSelectModal,
      HfPmProjectQuestionChooseModal,
      JImageUpload
    },
    props: {
      //流程表单data
      formData: {
        type: Object,
        default: ()=>{},
        required: false
      },
      //表单模式：true流程表单 false普通表单
      formBpm: {
        type: Boolean,
        default: false,
        required: false
      },
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      //处理显示
      disposes: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        fileList:[],
        form: this.$form.createForm(this),
        model: {},
        addType:{},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        labelCol2: {
          xs: { span: 24 },
          sm: { span: 3 }
        },
        wrapperCol2: {
          xs: { span: 24 },
          sm: { span: 20 }
        },
        confirmLoading: false,
        validatorRules: {
          projectShortName: {
            rules: [
              { required: true, message: '请选择项目简称!' }
            ]
          },
          subjectName: {
            rules: [
              { required: true, message: '请选择专题名称!' }
            ]
          },
          addType: {
            rules: [
              { required: false, message: '请选择增加方式!' }
            ]
            // initialValue:"0"
          },
          questionDes: {
            rules: [
              { required: true, message: '请输入问题描述!' }
            ]
          }
        },
        url: {
          add: "/pm/hfPmProjectQuestions/add",
          edit: "/pm/hfPmProjectQuestions/edit",
          queryById: "/pm/hfPmProjectQuestions/queryById",
          upload: '/pm/hfPmProjectQuestions/uploadFile'
        }
      }
    },
    computed: {
      formDisabled(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return false
          }
          return true
        }
        return this.disabled
      },
      showFlowSubmitButton(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return true
          }
        }
        return false
      }
    },
    created () {
      //如果是流程中表单，则需要加载流程表单data
      this.showFlowData();
    },
    methods: {
      typeChange(value) {
        this.addType = value
        this.model = {
          ...this.model,
          projectName: '',
          projectId: '',
          subjectId: '',
          subjectName: '',
          charger:'',
          proposeDep:'',
          proposePersion:'',
          contact:'',
          expectedTime:'',
          estimateWorkday:'',
          questionState:'',
          approveState:'',
          createBy:'',
          createTime:'',
          dutyPersion:'',
          dealType:''
        }
      },
      add () {
        this.edit({});
      },
      edit (record) {
        this.disposes = record.disposes;
        record.addType = '';
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'createBy','createTime','questionCode','projectId','projectCode','projectName','subjectId','subjectName',
            'subjectCode','proposeDep','proposePersion','questionDes','contact','expectedTime','dutyPersion','confirmorId',
            'confirmorName','confirmorDes','confirmorTime','estimateWorkday','dealType','questionState','approveState','charger','addType','businessDes','beginDes',
          'afterDes','colnumMes','demandMes','designMes','ortherMes','picMes'))
        })
      },
      //渲染流程表单数据
      showFlowData(){
        if(this.formBpm === true){
          let params = {id:this.formData.dataId};
          getAction(this.url.queryById,params).then((res)=>{
            if(res.success){
              this.edit (res.result);
            }
          });
        }
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            let formData = Object.assign(this.model, values);
            formData.img = this.fileList;
            console.log("表单提交数据",formData)
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
        })
      },
      popupCallback(row){
        this.form.setFieldsValue(pick(row,'createBy','createTime','questionCode','projectId','projectName','projectCode','subjectId','subjectName',
          'subjectCode','proposeDep','proposePersion','questionDes',
          'contact','expectedTime','dutyPersion','confirmorId','confirmorName','confirmorDes','confirmorTime','estimateWorkday',
          'dealType','questionState','charger','addType','businessDes','beginDes',
          'afterDes','colnumMes','demandMes','designMes','ortherMes','picMes'))
      },
      projectShortNameClick() {
        this.$nextTick(() => {
          this.$refs.hfProjectSelectModal.title = '选择项目'
          this.$refs.hfProjectSelectModal.visible = true
        })
      },
      hfPmProjectSelect(data) {
        this.form.setFieldsValue({
          projectId: data.id,
          projectName: data.shortName,
          projectCode:data.code,
          charger: data.charger
        })
      },
      projectSelectClick() {
        this.$nextTick(() => {
          this.$refs.hfPmProjectQuestionChooseModal.title = '选择项目'
          this.$refs.hfPmProjectQuestionChooseModal.visible = true
        })
      },
      projectSelect(data) {
        this.form.setFieldsValue({
          projectId: data.projectId,
          projectName: data.projectName,
          projectCode: data.projectCode,
          proposeDep: data.proposeDep,
          proposePersion: data.proposePersion,
          contact: data.contact,
          estimateWorkday: data.estimateWorkday,
          dutyPersion: data.dutyPersion,
          dealType: data.dealType,
          createBy: data.createBy,
          createTime: data.createTime,
          subjectName:data.subjectName,
          subjectId:data.subjectId,
          expectedTime:data.expectedTime,
          charger:data.charger
        })
      },
      subjectNameClick() {
        this.$nextTick(() => {
          this.$refs.hfSubjectSelectModal.title = '选择主题'
          this.$refs.hfSubjectSelectModal.visible = true
        })
      },
      hfSubjectSelect(data) {
        this.form.setFieldsValue({
          subjectId: data.id,
          subjectName: data.subjectName,
          subjectCode:data.subjectCode
        })
      }
    }
  }
</script>